<template>
  <div>
    <h1>标签列表</h1>
    <!-- 添加操作按钮 -->
    <el-button type="primary" @click="showAddTagDialog = true">新增标签</el-button>

    <!-- 新增标签的对话框 -->
    <el-dialog title="新增标签" :visible.sync="showAddTagDialog" width="30%">
      <el-input v-model="newTagName" placeholder="请输入新的标签名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddTagDialog = false">取 消</el-button>
        <el-button type="primary" @click="addTag(newTagName)">确 定</el-button>
      </span>
    </el-dialog>

    <table>
      <thead>
        <tr>
          <th>标签ID</th>
          <th>标签命名</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(tag) in tags" :key="tag.tag_id">
          <td>{{ tag.tag_id }}</td>
          <td>{{ tag.name }}</td>
          <td>
            <!-- 行内的删除按钮 -->
            <el-button type="text" size="small" @click="deleteTag(tag.tag_id)">删除</el-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-ui';

export default {
  name: 'Tags',
  data() {
    return {
      url: {
        getTagsALL: '/medical/lable/getTagsALL',
        insertTags: '/medical/lable/insertTags',
        deleteTag: '/medical/lable/deleteTag/'
      },
      tags: [],
      showAddTagDialog: false, // 控制新增标签对话框的显示
      newTagName: '' // 新标签的名字
    };
  },
  created() {
    this.fetchTags();
  },
  methods: {
    async fetchTags() {
      try {
        const response = await axios.get(`${this.URLhost}${this.url.getTagsALL}`, {
            params: { tagType: 'tongue'}
          });
        const result = response.data;

        if (result.code === 0 && result.data.code === 0) {
          this.tags = result.data.data;
        } else {
          console.error('获取标签列表失败:', result.msg || result.data.msg);
        }
      } catch (error) {
        console.error('请求失败:', error);
      }
    },

    addTag(name) {
      if (!name.trim()) {
        this.$alert('标签名称不能为空', '错误', { type: 'error' });
        return;
      }
      // 发送请求到服务器创建新标签
      console.log('发送给后端的要添加的新标签为：' + name);
      axios.post(`${this.URLhost}${this.url.insertTags}`, name, {
        headers: {
          "Content-Type": "application/json"
        },
      }).then(response => {
        if (response.data.code === 0) {
          this.$message({
            message: '标签添加成功',
            type: 'success'
          });
          this.fetchTags(); // 刷新列表
          this.showAddTagDialog = false; // 关闭对话框
        } else {
          this.$alert('标签添加失败: ' + response.data.msg, '错误', { type: 'error' });
        }
      })
        .catch(error => {
          this.$alert('标签添加失败: ' + error.message, '错误', { type: 'error' });
        });
    },


    deleteTag(tag_id) {
      if (window.confirm('此操作将永久删除该标签, 是否继续?')) {
        // 使用 tag_id 作为 URL 的一部分
        const url = `${this.URLhost}${this.url.deleteTag}${tag_id}`;
        console.log('url:'+url);
        axios.delete(url, {
          headers: {
            "Content-Type": "application/json"
          }
        }).then(response => {
          if (response.data.code === 0) {
            this.$message({
              message: '标签删除成功',
              type: 'success'
            });
            this.fetchTags(); // 刷新列表
          } else {
            this.$alert('标签删除失败: ' + response.data.msg, '错误', { type: 'error' });
          }
        }).catch(error => {
          this.$alert('标签删除失败: ' + error.message, '错误', { type: 'error' });
        });
      } else {
        this.$message({
          message: '标签取消删除',
          type: 'info'
        });
      }
    }

  }
};
</script>

<style scoped>
/* 样式保持不变 */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arial', sans-serif;
  /* 使用现代字体 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  /* 添加轻微阴影 */
  border-radius: 8px;
  /* 圆角边框 */
  overflow: hidden;
  /* 隐藏超出的内容，配合圆角使用 */
}

th,
td {
  border: 1px solid #ddd;
  padding: 12px;
  /* 增加内边距 */
  text-align: left;
  /* 左对齐文本 */
}

th {
  background-color: #81b2ac;
  /* 更改头部背景色 */
  color: white;
  /* 头部文字颜色为白色 */
}

tr:nth-child(even) {
  background-color: #f9f9f9;
  /* 交替行背景色 */
}

tr:hover {
  background-color: #eef7ff;
  /* 悬停时背景色 */
  cursor: pointer;
  /* 改变鼠标悬停时的指针形状 */
}

@media (max-width: 768px) {

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin: 0 0 1rem 0;
  }

  tr:nth-child(odd) {
    background: none;
  }

  tr td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  tr td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  tr td:nth-of-type(1):before {
    content: "标签ID";
  }

  tr td:nth-of-type(2):before {
    content: "标签命名";
  }

  tr td:nth-of-type(3):before {
    content: "操作";
  }
}
</style>